<template>
  <div id="responsibility">
     <!-- 顶部 -->
      <div class="top">
        <div class="center tip">
          <span class="left">欢迎访问郑州高新技术产业开发区信用建设管理平台</span>
          <span class="right">
            <span>管理后台</span>
            <span>意见建议</span>
          </span>
        </div>
      </div>
       <!-- 顶部导航搜索 -->
    <div class="bgsearch">
      <div class="center">
          <div class="search">
            <input type="text" placeholder="请输入企业名或组织机构代码">
            <button></button>
          </div>
      </div>
    </div>
     <!-- 导航栏 -->
      <div class="nav">
        <div class="center">
          <div class="con">
            <router-link tag="p"  to="index"><span>首页</span></router-link>
            <router-link tag="p"  to="policy"><span>政策法规</span></router-link>
            <router-link tag="p" to="build"><span>信用建设</span></router-link>
            <router-link tag="p" to="map"><span>信用地图</span></router-link>
            <router-link tag="p" class="active" to="responsibility"><span>信用责任</span></router-link>
            <router-link tag="p"  to='publicity'><span>信息公示</span></router-link>
          </div>
        </div>
      </div>
      <!-- 当前位置 -->
      <div class="current">
        <div class="center">
          <img src="../../assets/image/icon_current.png" alt="">
          <span>当前位置：<router-link to="index" tag="span">首页</router-link>></span><span class="red">信用责任</span>
        </div>
      </div>
      <!-- 内容部分 -->
      <div class="contents center">
        <div class="contop">
          <div class="red">
            <span>序</span>
            <span>号</span>
          </div>
          <div class="centergray">
            <div class="one"> <img src="../../assets/image/icon_name.png" alt=""> <span>单位名称</span></div>
            <div class="two"> <img src="../../assets/image/icon_two.png" alt=""> <span>行政许可</span></div>
            <div class="three"> <img src="../../assets/image/iconthre.png" alt=""> <span>行政处罚</span></div>
          </div>
        </div>
        <div class="tabCon">
          <!-- 图片表格 -->
          <div class="imgtab">
            <img src="../../assets/image/table.jpg" alt="">
          </div>
          <!-- 表格 -->
          <!-- <div class="table">
            <table>
              <tr>
                <td>1</td>
                <td>党政办公室</td>
                <td></td>
                <td></td>
                <td></td>
              </tr>
              <tr>
                <td>2</td>
                <td>监察审计局（纪工委）</td>
                <td>原监察审计局</td>
                <td></td>
                <td></td>
              </tr>
              <tr><td>3</td><td>党群工作部</td><td></td><td></td><td></td></tr>
              <tr><td>4</td><td>创新发展局</td><td></td><td></td><td></td></tr>
              <tr><td>5</td><td>党政办公室</td><td></td><td></td><td></td></tr>
              <tr><td>6</td><td>党政办公室</td><td></td><td></td><td></td></tr>
              <tr><td>7</td><td>党政办公室</td><td></td><td></td><td></td></tr>
              <tr><td>8</td><td>党政办公室</td><td></td><td></td><td></td></tr>
              <tr><td>9</td><td>党政办公室</td><td></td><td></td><td></td></tr>
              <tr><td>10</td><td>党政办公室</td><td></td><td></td><td></td></tr>
              <tr><td>11</td><td>党政办公室</td><td></td><td></td><td></td></tr>
              <tr><td>12</td><td>党政办公室</td><td></td><td></td><td></td></tr>
              <tr><td>13</td><td>党政办公室</td><td></td><td></td><td></td></tr>
              <tr><td>14</td><td>党政办公室</td><td></td><td></td><td></td></tr>
              <tr><td>15</td><td>党政办公室</td><td></td><td></td><td></td></tr>
            </table>
          </div> -->
        </div>
      </div>
      
    <foot></foot>
  </div>
</template>

<script>
import foot from './home/foot.vue'
export default {
  name: 'responsibility',
  components: {
    foot
  },
  data () {
    return {
      tableData: [
         {
         faren: '河南XXXXXXXX有限公司',
         jdwsh: 'T431',
         xmmc: '特种设备使用登记许可',
         xkjg: '郑州市质量技术监督局',
         xkjdrq: '2019-09-13'
       },
         {
         faren: '河南XXXXXXXX有限公司',
         jdwsh: 'T431',
         xmmc: '特种设备使用登记许可',
         xkjg: '郑州市质量技术监督局',
         xkjdrq: '2019-09-13'
       },
         {
         faren: '河南XXXXXXXX有限公司',
         jdwsh: 'T431',
         xmmc: '特种设备使用登记许可',
         xkjg: '郑州市质量技术监督局',
         xkjdrq: '2019-09-13'
       },
         {
         faren: '河南XXXXXXXX有限公司',
         jdwsh: 'T431',
         xmmc: '特种设备使用登记许可',
         xkjg: '郑州市质量技术监督局',
         xkjdrq: '2019-09-13'
       },
         {
         faren: '河南XXXXXXXX有限公司',
         jdwsh: 'T431',
         xmmc: '特种设备使用登记许可',
         xkjg: '郑州市质量技术监督局',
         xkjdrq: '2019-09-13'
       },
         {
         faren: '河南XXXXXXXX有限公司',
         jdwsh: 'T431',
         xmmc: '特种设备使用登记许可',
         xkjg: '郑州市质量技术监督局',
         xkjdrq: '2019-09-13'
       },
         {
         faren: '河南XXXXXXXX有限公司',
         jdwsh: 'T431',
         xmmc: '特种设备使用登记许可',
         xkjg: '郑州市质量技术监督局',
         xkjdrq: '2019-09-13'
       },
         {
         faren: '河南XXXXXXXX有限公司',
         jdwsh: 'T431',
         xmmc: '特种设备使用登记许可',
         xkjg: '郑州市质量技术监督局',
         xkjdrq: '2019-09-13'
       },
         {
         faren: '河南XXXXXXXX有限公司',
         jdwsh: 'T431',
         xmmc: '特种设备使用登记许可',
         xkjg: '郑州市质量技术监督局',
         xkjdrq: '2019-09-13'
       },
         {
         faren: '河南XXXXXXXX有限公司',
         jdwsh: 'T431',
         xmmc: '特种设备使用登记许可',
         xkjg: '郑州市质量技术监督局',
         xkjdrq: '2019-09-13'
       },
      ],
      currentPage: 1,
    };
  },
  methods: {
    handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
  }
};
</script>

<style lang="scss">
  #responsibility {
     .center {
      width: 1200px;
      margin: 0 auto;
    }
    .top {
      width: 100%;
      height:40px;
      background:rgba(241,241,241,1);
      .tip {
        display: flex;
        justify-content: space-between;
        span {
          font-size:16px;
          font-weight:400;
          color:rgba(56,56,56,1);
          line-height: 40px;
          &.right {
            span:first-child {
              padding-right: 20px;
              border-right: 2Px solid #cccccc;
            }
            span:last-child {
              padding-left: 18px;
            }
          }
        }
      }
    }
    // ------------------------
      .bgsearch {
      width: 100%;
      height: 300px;
      background-image: url(../../assets/image/zeren.jpg);
      background-position: center center;
      position: relative;
      background-repeat: no-repeat;
      // padding-top: 450px;
      .center {
        position: relative;
        .search {
          display: inline-block;
          position: absolute;
          top: 230px;
          left: 696px;
          width:435px;
          height:51px;
          input {
            position: absolute;
            left: 0;
            top: 0;
            width:435px;
            height:51px;
            box-sizing: border-box;
            background:rgba(255,255,255,1);
            box-shadow:0px 2px 5px 0px rgba(0, 0, 0, 0.35);
            opacity:0.85;
            border-radius:20px;  
            padding-right: 70px;
            padding-left: 20px;
          }
          button {
            position: absolute;
            right: -20px;
            top: 0;
            width:55px;
            height:51px;
            background-color: #db4444;
            border-top-right-radius: 20px;
            border-bottom-right-radius: 20px;
            background-image: url(../../assets/image/search.png);
            background-position: center center;
            background-repeat: no-repeat;
          }
        }
      }
   }
   .nav {
        width: 100%;
        height:67px;
        background:rgba(213,35,36,1);
        position: relative;
        margin-top: -1px;
        .con {
          display: flex;
          justify-content: flex-start;
          p {
            width: 190px;
            height: 67px;
            font-size: 20px;
            color: white;
            line-height: 67px;
            text-align: center;
            box-sizing: border-box;
            border-left: 2px solid white;
            &:last-child {
              border-right: 2px solid white;
            }
            &.active {
              background-color: white;
              span {
                color: #D52324;
                border-bottom: 1px solid #D52324; 
              }
            }
          }
      }
    }
    .current {
      height:50px;
      background:rgba(191,190,190,1);
      margin-bottom: 28px;
      img {
        line-height: 50px;
      }
      span {
        line-height: 50px;
        &.red {
          color: #d52324;
        }
      }
    }
    .contents {
      height:1571px;
      border:1px solid rgba(154,153,153,1);
      margin-bottom: 40px;
      .contop {
        height:106px;
        // background:rgba(213,35,36,1);
        display: flex;
        margin-bottom: 4px;
        .red {
          width: 83px;
          height:106px;
          // display: inline-block;
          background:rgba(213,35,36,1);
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          span {
            color: white;
            display: inline-block;
            width: 83px;
            text-align: center;
          }
        }
      }
      .centergray {
        // display: inline-block;
        width:1093px;
        height:68px;
        background: #e2e1e1;
        margin-top: 32px;
        margin-left: 23px;
        >div {
          height: 50px;
          display: inline-block;
          margin-top: 14px;
          img {
            vertical-align: middle;
          }
          &.one {
            margin-left: 224px;
          }
          &.two {
            margin-left: 174px;
          }
          &.three {
            margin-left: 152px;
          }
        }
           
      }
      // .table {
      //       width: 100%;
      //       height: 600px;
      //       background: red;
      //     }   
    }
    
  }
</style>
